<template>
    <div class="header">
        <div class="logo">物流运输管理系统</div>
        <!-- 头部组件右边功能区 -->
            <div class="header-right">
              <div class="header-user-con">
                <!-- 用户名下拉菜单：trigger 属性配置 click 激活
                        command：点击菜单项触发的事件回调 -->
                <el-dropdown class="user-name" @command="handleCommand">
                  <span class="el-dropdown-link">
                    {{ $store.state.user.name }}
                    <i class="el-icon-caret-bottom"></i>
                  </span>
                  <!-- slot 设置下拉列表 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>项目仓库</el-dropdown-item>
                    <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
    </div>
</template>

<script>
    export default {
        methods:{
            handleCommand(c) {
                switch(c) {
                   case "loginout":
                       window.localStorage.clear();
                       this.$router.push({path:"/"});
                       break;
                }
            }
        }
    }
</script>

<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        color: #fff;
        background-color: #008ec2;
    }
    .header .logo {
        float: left;
        width: 250px;
        line-height: 70px;
        box-sizing: border-box;
        padding: 0 20px;
    }
    .header-right {
        float: right;
        padding-right: 50px;
    }
    .header-user-con {
        display: flex;
        height: 70px;
        align-items: center;
    }
    .user-name {
        margin-left: 10px;
    }
    .el-dropdown-link {
        color: #fff;
        cursor: pointer;
    }
    .el-dropdown-menu__item {
        text-align: center;
    }
</style>
